<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">

                    在线选座页面</h3>

                <div class="box-tools">
                    <div class="input-group input-group-sm" style="width: 100px;">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-primary btn-reserve">
                                预定座位
                            </button>

                            <button type="button" class="btn btn-success btn-return">
                                退订座位
                            </button>
                            &nbsp;&nbsp;
                            <button type="button" class="btn btn-danger btn-delete">
                                删除
                            </button>
                            <button type="button" class="btn btn-default btn-add">添加</button>
                            <button type="button" class="btn btn-default btn-update">修改</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table id="menuTable" class="table table-hover">
                    <thead>
                    <tr>
                        <th data-field="selectItem" data-checkbox="true"></th>
                    </tr>
                    </thead>

                </table>
            </div>
        </div>
        <!-- /.box -->
    </div>
</div>
<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="bower_components/treegrid/tree.table.js"></script>
<script type="text/javascript">
    /**
     * 初始化表格的列
     */

    var columns = [
        {
            field: 'selectItem',
            radio: true
        },
        {
            title: '座位号',
            field: 'id',
            align: 'center',
            valign: 'middle',
            width: '100px'
        },
        {
            title: '座位区域',
            field: 'name',
            align: 'center',
            valign: 'middle',
            width: '130px'
        },
        {
            title: '所在层数',
            field: 'parentName',
            align: 'center',
            valign: 'middle',
            sortable: true,
            width: '100px'
        },
        {
            title: '座位状态',
            field: 'state',
            align: 'center',
            valign: 'middle',
            width: '45px',
            formatter: function (item, index) {
                if (item.state == 1) {
                    return '<span class="label label-success">空闲中</span>';
                }
                if (item.state == 2) {
                    return '<span class="label label-warning">已占用</span>';
                }
            }
        }, {
            title: '占用用户',
            field: 'usedUser',
            align: 'center',
            valign: 'middle',
            sortable: true,
            width: '100px'
        }, {
            title: '创建时间',
            field: 'createdTime',
            align: 'center',
            valign: 'middle',
            sortable: true,
            width: '100px'
        }];//格式来自官方demos -->treeGrid(jquery扩展的一个网格树插件)
    $(function () {
        doGetObjects();
        $(".input-group-btn")
            .on("click", ".btn-delete", doDeleteObject)
            .on("click", ".btn-add,.btn-update", doLoadEditUI)
            .on("click", ".btn-reserve", doLoadReserveUI)
            .on("click", ".btn-return", doLoadReturnUI);
    })

    // 退订页面的显示
    function doLoadReturnUI(){
        var title = "您确定要退订该座位吗?"
        //基于点击对象的class属性值,修改标题
        var item = doGetCheckedItem();
        if (!item) {
            alert("请先选择座位号!");
            return;
        }
        if (item.id == 1 || item.id == 2 || item.id == 3) {
            alert("不能选择根节点(楼层)！");
            return;
        }
        if (item.state == 1) {
            alert("您没有预定该座位!");
            return;
        }
        $("#mainContentId")
            .data("rowData", item);

        //异步加载编辑页面
        var url = "seat/seat_return";
        $("#mainContentId").load(url, function () {
            $(".box-title").html(title);
        })
    }

    // 预定页面的显示
    function doLoadReserveUI() {
        var title = "您确定要预定该座位吗?"
        //基于点击对象的class属性值,修改标题
        var item = doGetCheckedItem();
        if (!item) {
            alert("请先选择");
            return;
        }
        if (item.id == 1 || item.id == 2 || item.id == 3) {
            alert("不能选择根节点(楼层)！");
            return;
        }
        if (item.state == 2) {
            alert("该座位已经被占用!");
            return;
        }
        $("#mainContentId")
            .data("rowData", item);

        //异步加载编辑页面
        var url = "seat/seat_reserve";
        $("#mainContentId").load(url, function () {
            $(".box-title").html(title);
        })
    }


    function doLoadEditUI() {
        var title;
        //基于点击对象的class属性值,修改标题
        if ($(this).hasClass("btn-add")) {
            title = "添加菜单";
        } else {
            title = "修改菜单";
            var item = doGetCheckedItem();
            if (!item) {
                alert("请先选择");
                return;
            }
            $("#mainContentId")
                .data("rowData", item);
        }
        //异步加载编辑页面
        var url = "seat/seat_edit";
        $("#mainContentId").load(url, function () {
            $(".box-title").html(title);
        })
    }

    function doGetCheckedItem() {
        return $("tbody input[type='radio']:checked")
            .parents("tr").data("rowData");
    }

    function doGetCheckedId() {
        //方法1:
        //var radio=$("tbody input[type='radio']:checked");
        //if(radio)return radio.val();
        //方法2:
        //1.获取选中的记录
        var selections = $("#menuTable")
            //bootstrapTreeTable是treeGrid插件内部定义的jquery扩展函数
            //getSelections为扩展函数内部要调用的一个方法
            .bootstrapTreeTable("getSelections");
        //2.对记录进行判定
        if (selections.length == 1)
            return selections[0].id;
    }

    function doDeleteObject() {
        //1.获取选中记录的id值
        var id = doGetCheckedId();
        console.log("id=" + id);
        if (!id) {
            alert("请先选中");
            return;
        }
        //2.给出提示是否确认删除
        if (!confirm("确认删除吗")) return;
        //3.发送异步请求执行删除操作
        //3.1定义请求参数
        var params = {"id": id};
        //3.2定义请求url
        var url = "seat/doDeleteObject";
        //3.3发送异步请求
        $.post(url, params, function (result) {
            if (result.state == 1) {
                alert(result.message);
                $("tbody input[type='radio']:checked")
                    .parents("tr").remove();
            } else {
                alert(result.message);
            }
        })
    }

    function doGetObjects() {
        //移除mainContentId位置的数据
        $("#mainContentId").removeData();
        var treeTable = new TreeTable(
            "menuTable",//tableId
            "seat/doFindObjects",//url
            columns);//表中列的配置
        //treeTable.setExpandColumn(2);
        //做表格初始化
        treeTable.init();	//发起ajax请求(借助ajax函数)

    }